<template>
	<div v-if="Fstate == 'readonly'">
		<div v-if="notEmpty(format)" class="read">
			{{ format || '' }}
		</div>
		<div v-else class="read">
			{{
				Ftag == 'price'
					? notEmpty(value)
						? A_viewPrice(value)
						: '-'
					: notEmpty(value)
					? value
					: '-'
			}}
		</div>
	</div>
	<uni-easyinput
		v-else
		class="uni-mt-5"
		trim="both"
		:value="value"
		size="mini"
		placeholder="请输入内容"
		:disabled="Fdisabled"
		:type="Ftype"
		@input="setInfoData"
		@change="change"
		@clear="clear"
		@focus="focus"
		@blur="blur"
		@confirm="confirm"
		@iconClick="iconClick"
		@keyboardheightchange="keyboardheightchange"></uni-easyinput>
</template>

<script>
	export default {
		name: '',
		components: {},
		props: {
			value: {
				required: false,
			},
			state: {
				required: false,
				default: 'write',
			},
			disabled: {
				required: false,
			},
			type: {
				required: false,
			},
			tag: {
				required: false,
			},
			format: {
				required: false,
			},
			min: {
				required: false,
			},
			max: {
				required: false,
			},
			placeholder: {
				required: false,
			},
			precision: {
				required: false,
				type: Number,
				default: 2,
			},
		},
		data() {
			return {
				inputData: '',
			};
		},
		computed: {
			infoData: {
				get() {
					return this.value;
				},
				set(val) {
					this.inputData = val;
					this.$emit('input', val);
				},
			},
			Fstate() {
				return this.state;
			},
			Fdisabled() {
				return this.disabled ?? this.Fstate == 'disabled';
			},
			Ftype() {
				let type = this.type;
				if (this.type == 'price' || this.type == 'number') {
					type = 'digit';
				}
				return type;
			},
			Ftag() {
				let tag = this.tag;
				if (this.type == 'price') {
					tag = 'price';
				}
				return tag;
			},
			_placeholder() {
				return this.placeholder ?? '请输入内容';
			},
		},
		created() {},
		watch: {},
		mounted() {
			this.inputData = this.infoData;
		},
		methods: {
			setInfoData(val) {
				this.inputData = val;
			},
			clear(e) {
				this.infoData = '';
				this.$emit('clear', this.infoData);
				this.change(undefined);
			},
			focus(e) {
				this.$emit('focus', this.infoData);
			},
			blur(e) {
				let valueCopy = this.infoData;
				let willChangeNumber = this.inputData;
				let precision = this.precision < 0 ? 0 : this.precision;
				if (this.type == 'price' || this.type == 'number') {
					willChangeNumber = parseFloat(this.inputData);
					if (!Number.isFinite(willChangeNumber)) {
						willChangeNumber = undefined;
					}
				}
				if (
					this.notEmpty(this.precision) &&
					(this.type == 'price' || this.tag == 'price' || this.type == 'number') &&
					this.notEmpty(willChangeNumber) &&
					willChangeNumber.indexOf('.') > -1
				) {
					let arr = willChangeNumber?.split?.('.');
					if (precision === 0) {
						willChangeNumber = arr?.[0];
					} else {
						let point = arr?.[1]?.substring?.(0, precision + 1);

						willChangeNumber = `${arr?.[0] ?? ''}${this.notEmpty(point) ? '.' : ''}${
							point ?? ''
						}`;
					}
				}
				if (this.notEmpty(this.min)) {
					if (Number(willChangeNumber) < Number(this.min)) {
						willChangeNumber = this.min;
						this.inputData = willChangeNumber;
						this.change(this.min);
					}
				}
				if (this.notEmpty(this.max)) {
					if (Number(willChangeNumber) > Number(this.max)) {
						willChangeNumber = this.max;
						this.inputData = willChangeNumber;
						this.change(this.max);
					}
				}
				// if (willChangeNumber !== valueCopy) {
				// 	this.infoData = willChangeNumber;
				// }
				this.infoData = willChangeNumber;
				this.$emit('input', willChangeNumber);
				this.$emit('blur', willChangeNumber);
			},
			confirm(e) {
				this.$emit('confirm', this.infoData);
			},
			iconClick(e) {
				this.$emit('iconClick', this.infoData);
			},
			change(e) {
				this.$emit('change', e ?? this.infoData);
			},
			keyboardheightchange(e) {
				this.$emit('keyboardheightchange', this.infoData);
			},
		},
	};
</script>

<style lang="scss" scoped>
	.uni-input {
		line-height: 30rpx;
		margin-left: 10rpx;
	}
	.read {
		// min-height: 32px;
	}
	.disabled {
		color: #606266;
	}
</style>
